<template>
    <a v-if="isShowA" class="uni-link" :href="href"
       :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
       :style="{color,fontSize:fontSize+'px'}" :download="download">
        <slot>{{text}}</slot>
    </a>
    <!-- #ifndef APP-NVUE -->
    <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
          :style="{color,fontSize:fontSize+'px'}" @click="openURL">
        <slot>{{text}}</slot>
    </text>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
          :style="{color,fontSize:fontSize+'px'}" @click="openURL">
        {{text}}
    </text>
    <!-- #endif -->
</template>

<script>
    /**
     * Link 外部网页超链接组件
     * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
     * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
     * @property {String} href 点击后打开的外部网页url
     * @property {String} text 显示的文字
     * @property {String} downlaod H5平台下载文件名
     * @property {Boolean} showUnderLine 是否显示下划线
     * @property {String} copyTips 在小程序端复制链接时显示的提示语
     * @property {String} color 链接文字颜色
     * @property {String} fontSize 链接文字大小
     * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
     */
    export default {
        name: 'uniLink',
        props: {
            href: {
                type: String,
                default: ''
            },
            text: {
                type: String,
                default: ''
            },
            download: {
                type: String,
                default: ''
            },
            showUnderLine: {
                type: [Boolean, String],
                default: true
            },
            copyTips: {
                type: String,
                default: '已自动复制网址，请在手机浏览器里粘贴该网址'
            },
            color: {
                type: String,
                default: '#999999'
            },
            fontSize: {
                type: [Number, String],
                default: 14
            }
        },
        computed: {
            isShowA() {
                // #ifdef H5
                this._isH5 = true;
                // #endif
                if ((this.isMail() || this.isTel()) && this._isH5 === true) {
                    return true;
                }
                return false;
            }
        },
        created() {
            this._isH5 = null;
        },
        methods: {
            isMail() {
                return this.href.startsWith('mailto:');
            },
            isTel() {
                return this.href.startsWith('tel:');
            },
            openURL() {
                // #ifdef APP-PLUS
                if (this.isTel()) {
                    this.makePhoneCall(this.href.replace('tel:', ''));
                } else {
                    plus.runtime.openURL(this.href);
                }
                // #endif
                // #ifdef H5
                window.open(this.href)
                // #endif
                // #ifdef MP
                uni.setClipboardData({
                    data: this.href
                });
                uni.showModal({
                    content: this.copyTips,
                    showCancel: false
                });
                // #endif
            },
            makePhoneCall(phoneNumber) {
                uni.makePhoneCall({
                    phoneNumber
                })
            }
        }
    }
</script>

<style>
    /* #ifndef APP-NVUE */
    .uni-link {
        cursor: pointer;
    }

    /* #endif */
    .uni-link--withline {
        text-decoration: underline;
    }
</style>
